<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
    <link rel="stylesheet" type="text/css" href="/static/css/profilePage.css">
    <script src="/assets/js2/layer.js"></script>
</head>
<body class="F5">
<div id="app" class="profile-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <a href="{:url('index/user/index');}"><div class="go-back"><img src="/static/images/go-back.png" alt=""></div></a>
                    <div class="text">个人资料</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    
    <div class="group">
        <div class="cell">
            <div class="title">头像</div>
            <div class="right">
                <label for="avatarUpload">
                    <img id="avatarImg" class="avatar" src="{$user['avatar']}" alt="">    
                     <input type="hidden" id="filePath" value="{$user['avatar']}">
                     <input type="hidden" id="gender" value="{$user['gender']}">
                </label>
                <input type="file" accept="image/*" style="display: none;" onchange="selectAvatar()" id="avatarUpload"/>
                <img class="rightIcon" src="/static/images/right5.png" alt="">
            </div>
        </div>
        <div class="cell">
            <div class="title">昵称</div>
            <div class="right">
                <!-- <span class="rightText">薛定谔的猫</span> -->
                <input class="rightText" id="nickname" type="text" value="{$user['nickname']}">
            </div>
        </div>
        <div class="cell">
            <div class="title">性别</div>
            <div class="right">
                <div class='circleBox {eq name="user.gender" value="0"} circleBoxAct {/eq} ' name="0" onclick="switchTab(this)">
                    <div class="circle"></div>
                    <div class="label">保密</div>
                </div>
                <div class="circleBox {eq name='user.gender' value='1'} circleBoxAct {/eq}" name="1" onclick="switchTab(this)">
                    <div class="circle"></div>
                    <div class="label">男</div>
                </div>
                <div class="circleBox {eq name='user.gender' value='2'} circleBoxAct {/eq}" name="2" onclick="switchTab(this)">
                    <div class="circle"></div>
                    <div class="label">女</div>
                </div>
            </div>
        </div>
    </div>

    <button onclick="sand()" class="btn">确定</button>
</div>
<script src="/static/js/common.js"></script>
<script>
    const selectAvatar = () => {
        const preview = document.querySelector('#avatarImg');
        const file = document.querySelector('#avatarUpload').files[0];
        var url = "{:url('api/common/upload')}";
        upload_img(url, file, function (res) {
             console.log(res);
         })
        
//        const reader = new FileReader();
//
//        reader.addEventListener("load", function () {
//            // convert image file to base64 string
//            preview.src = reader.result;
//        }, false);
//
//        if (file) {
//            reader.readAsDataURL(file);
//        }
//        
//        console.log('avatar File------',file);   
    }

    const switchTab = (tabElement) => {
        // 获取当前点击 Tab 的 name 属性值
        let tabName = $(tabElement).attr("name");
        console.log("当前点击的 Tab name: " + tabName);
        $('#gender').val(tabName);
        // 切换 Tab 的高亮状态
        $(".circleBox").removeClass("circleBoxAct");  // 移除所有 Tab 的高亮
        $(tabElement).addClass("circleBoxAct"); // 给当前 Tab 添加高亮
    }
    
    function upload_img(url,file_img, callback) {
        var formData = new FormData();
        formData.append('file', file_img);
        $.ajax({
            url: url, // 替换为你的上传脚本URL
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {

                console.log(res);
//                    var res = {"code":0,"msg":"success","count":0,"data":{"msg":"上传成功","paths":["upload\/2024\/12\/03\/154121674eb6210fed0.jpg"],"names":["MSI_MAG.jpg"],"uris":["https:\/\/pic-cdn.wbball.com\/upload\/2024\/12\/03\/154121674eb6210fed0.jpg"],"size":[3237314],"exts":["jpg"],"reads":[],"is_imgs":[1],"code":0},"totalRow":[]}
                if (res.code == 1) {
                      $("#avatarImg").attr('src',res.data.fullurl);
                      $("#filePath").val(res.data.url);
                }
            },
            error: function (xhr, status, error) {
                // 请求失败时的回调函数
                console.log('请求失败:', textStatus);
                console.log('详细错误信息:', errorThrown);
            }
        });
    }
    

    function sand(){
        var filePath = $("#filePath").val();
        var gender = $("#gender").val();
        var nickname = $("#nickname").val();
        
        $.post("{:url('index/user/userinfo')}",{"path":filePath,'nickname':nickname,"gender":gender},function(ret){
                layer.msg(ret.msg,{icon:1,time:3000,shade:0.4},function() {
                });
        });
    }
</script>
</body>
</html>